<%@ page import="com.psl.model.userlogin" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    userlogin userinfo = (userlogin) session.getAttribute("user");
    if (userinfo == null) {
        response.sendRedirect("/login.do");
    }%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="/assets/css/text.css" rel="stylesheet" type="text/css">
    <link href="/assets/css/main.css" rel="stylesheet" type="text/css">
    <link href="/assets/css/content.css" rel="stylesheet" type="text/css">
    <link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" src="/assets/js/common.js"></script>
    <script language="javascript" src="/assets/js/general.js"></script>
    <script language="JavaScript" type="text/JavaScript">
    </script>
    <style>
        .order {
            border: 1px solid #00D2D2;
            border-top-width: 0
        }

        .order td {
            border: 1px solid #00D2D2;
            border-top-width: 0
        }
        body{
            font-size: 16px;
        }
        #title {
            width: 92%;
            border: 0px;
            margin-bottom: 10px;
        }

        #title td {
            text-align: center;
            height: 20px;
            line-height: 150%
        }

        #title div {
            background-image: url(/assets/img/dot_02.gif);
            background-position: left top;
            background-repeat: no-repeat;
            margin: 0 auto;
            padding-left: 20px;
            text-align: left;
            width: 10%;
            font-size: 15px;
            font-weight: bold;
            color: #CC0000;
            letter-spacing: 2px;
        }
    </style>
</head>
<body>

<table cellspacing="0" cellpadding="0" id="title" align="center">
    <tbody>
    <tr>
        <td nowrap="nowrap">
            <div>文件上传</div>
        </td>
    </tr>
    </tbody>
</table>
<table cellspacing="0" cellpadding="0" class="subtitle">
    <tbody>
    <tr>
        <td class="subtitle">文件上传说明</td>
        <td>&nbsp;</td>
        <td id="rightbg">&nbsp;</td>
    </tr>
    </tbody>
</table>
<table cellpadding="0" cellspacing="0" class="explain_tab">
    <tbody>
    <tr>
        <td class="explain">
            <p align="left">使用说明：先输入订单号，点击上传文件，弹出上传窗口，选择文件类别，选择文件进行上传，当上传完成后系统会给出提示，关闭上传窗口即可</p>
        </td>
    </tr>
    </tbody>
</table>
<br>

<table width="99%" border="0" cellpadding="3" cellspacing="1" align="center" class="datalist">
    <tbody>
    <tr align="center" bgcolor="">
        <form name="fp" action="/ordersearch.do" method="post">
            <td height="25" align="center" bgcolor="" colspan="2">订单号<input type="text" name="order_id" value=""><input type="submit" value="查询"></td>
        </form>
    </tr>
    <tr>
        <td height="25" align="center" bgcolor="" colspan="2"></td>
    </tr>
    <tr>
        <form name="fo">
        <td height="25" align="center" bgcolor="">订单号<input type="text" name="order_id" value=""></td><td height="25" align="center" bgcolor=""><a data-toggle="modal" href="#myModal">上传文件</a></td>
        </form>
    </tr>
    </tbody>
</table>


<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="false">×</button>
        <h3 id="myModalLabel">上传文件</h3>
    </div>
    <div class="modal-body">
        <form action="/servlet/UploadServlet" name="f1" id="f1" method="post" enctype="multipart/form-data" target="if">
            请选择上传资料分类
            <select name="filetype">
                <option value="1">订单</option>
                <option value="2">单证资料</option>
                <option value="3">贷代费用明细<br>及发票扫描</option>
                <option value="4">合同金额</option>
                <option value="5">外采购合同</option>
                <option value="6">商业发票金额</option>
                <option value="7">产品明细</option>
                <option value="8">导入模板</option>
            </select><br>
            <input type="file" id="file1" name="file1" value=""/>
            <input type="submit" name="but1" value="提交" onclick="go()"/>
        </form>
        <br>
        <span id="prop" style="width:15px;height:15px;display: none;">0%</span>
        <iframe id="if" name="if" src="" style="display: none"></iframe>
    </div>
</div>
<script type="text/javascript">
    function go() {
        document.all.f1.submit();
        var url = "/servlet/UploadServlet?";
        var filetype = document.f1.filetype.value;
        var order_id = document.fo.order_id.value;
        url += "filetype=" + filetype + "&order_id=" + order_id;
        document.all.f1.action = url;
        document.getElementById("prop").style.display = "";
        timer = setInterval("getP()", 50);
    }
    var request;
    function getP() {
        //判断不同浏览器
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        } else {
            request = new ActiveXObject("Microsoft.XMLHttp");
        }

        request.onreadystatechange = callBack;
        url = "/servlet/ProgressServlet";
        /* 注意你servlet的地址 */
        request.open("post", url, true);

        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send("&timeStamp=" + (new Date()).getTime());

    }
    //回调函数，
    function callBack() {
        if (request.readyState == 4 && request.status == 200) {

            result = request.responseText;
            var result = result.replace(/(^\s*)|(\s*$)/g, "");
            var res = result.split(",");
            var flag = res[1];
            var per = parseInt(res[0]);
            var err = res[2];
            document.getElementById("prop").innerHTML = per + "%";
            if (flag == "OK") {
                window.clearInterval(timer);
                alert("上传成功！");
                document.getElementById("prop").innerHTML = "";
                f1.reset();
            }
            if (err != "" || err.length > 0) {
                window.clearInterval(timer);
                alert(err);
            }
            if (flag == null) {
                window.clearInterval(timer);
            }
        }
    }
</script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>